<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>路由初步</title>
    <script src="../js/vue.js"></script>
    <script src="../js/vue-router.js"></script>
    <style>
        .box{
            width:300px;
            min-height:300px;
            border-radius: 20px;
            border:1px solid darkkhaki;
            margin: 20px;
            padding:30px;
            cursor: pointer;
            
        }
        .router-link-exact-active , .router-link-active{
            color:brown;
            font-size: 30px;
            font-weight: 800;
        }
    </style>
</head>
<body>
    <div id="app">
        <h2>title = {{ title}} </h2>
        <my-head></my-head>
        <!-- 5. 路由出口  路由匹配到的组件将渲染在这里  展示组件内容 -->
        <div class="box">
            <router-view></router-view>
        </div>

        <!-- 6.  路由导航 -->
        <p>
            <router-link to="/home">首页</router-link>
            <router-link :to="{path:'/home'} ">首页3</router-link>

            <router-link :to="{name:'home'}" >首页2</router-link>

            <router-link :to="{path:'/dashborad'}" >首页3</router-link>

            <router-link to="/good/家电/10?name=中百&tel=8771111">商品-中百</router-link>
            <router-link to="/good/服装/109?name=沃尔玛&tel=8662222">商品-沃尔玛</router-link>

            <router-link to="/user/bigZuo/18/18011112222?address=wuhan&area=江夏区#level3">大左 - 1 </router-link>
            <router-link to="/user/yangyang/38/19012341234?address=荆州&area=东湖高新区#level2">洋仔 - 2 </router-link>
            <router-link :to="{name:'user', params:{uname:'yongge',uage:25,uphone:'1238999123'}, query:{ address:'北京',area:'朝阳'
        },hash:'level1' }">勇哥-3</router-link>            
            <router-link to="/mine?uid=2309" >我的</router-link>
            <router-link :to="{name:'mine',query:{uid:1314}}" >我的2</router-link>

            <router-link to="/user/admin/super" >超级管理员</router-link>
            <router-link :to="{name:'admin'}" >超级管理员2</router-link>

        </p>
    </div>

    <template id="home">
        <div>
            <h2>Home - Home - 首页 </h2>
        </div>
    </template>

    <template id="good">
        <div>
            <h2>Good - Good - 商品页面 </h2>
            <h2>$route params 路由参数  冒号声明的 </h2>
            <h2>type = {{ $route.params.type }}</h2>
            <h2>数量total = {{ $route.params.total }}</h2>
            <h2>$route query  路由查询参数  问号声明的 </h2>
            <h2>name == {{ $route.query.name }} </h2>
            <h2>tel  == {{ $route.query.tel }} </h2>
            <h2>路由名称 = {{ $route.name }} </h2>
            
        </div>
    </template>

    <template id="mine">
        <div>
            <h2>mine - mine - 个人中心  </h2>
            <h2> $route - 路由信息对象  </h2>
            <h2> query == uid == {{$route.query.uid}} </h2>
        </div>
    </template>

    <template id="user">
        <div>
            <h2>user - user - 用户信息 </h2>
            <h2>params </h2>
            <h2>uname = {{ $route.params.uname }}</h2>
            <h2>uage = {{ $route.params.uage }}</h2>
            <h2>uphone = {{ $route.params.uphone }}</h2>
            <h2>query </h2>
            <h2>address == {{$route.query.address }}</h2>
            <h2>area = {{ $route.query.area }} </h2>
            <h2>路由名称 = {{ $route.name  }} </h2>
            <h2>path {{$route.path }}</h2>
            <h2>fullPath  {{$route.fullPath }}</h2>
            <h2>meta = {{ $route.meta }}</h2>
            <h2>hash 值  = {{ $route.hash }} </h2>

        </div>
    </template>

    <script>
        // 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)   脚手架 vite 

        const Head = {
            template:"<header>Head - Head - WH2309 </header>"
        }
        Vue.component("my-head",Head)
        // 1.  定义 (路由) 组件。
        const Home = {
            template:"#home"
        }
        const Good = {
            template:"#good",
            mounted(){
                
            }
        }
        const Mine = {
            template:"#mine",
            mounted(){
                console.log(this.$route)  // 路由信息对象 
            }
        }
        const User = {
            template:"#user",
        }

        // 2. 定义路由
        // 每个路由应该映射一个组件。 
        const routes = [
            {
                path:'/',
                redirect:'/home'
            },
            {
                path:'/home',
                alias:"/dashborad",  // 别名 
                component:Home,
                name:"home",
            },
            {
                path:'/good/:type/:total?',  // :声明的  路由参数  params 
                component:Good,
                name:'good',
                meta:'Hello 2309'
            },
            {
                path:"/user/admin/super",
                name:"admin",
                component:{
                    template:"<h2>Super Admin - 超级管理员 路由页面 - Admin </h2>"
                }
            },
            {
                path:'/user/:uname/:uage/:uphone?',
                name:'user',
                component:User,
                meta:{  // 记录路由的静态数据 
                    isFlag:true,
                    isNum:999,
                    isLogin:true 
                }
            },
           
            {
                path:'/mine',
                alias:"/wode",
                component:Mine,
                name:'mine',
                
            },
            {
                path:"/404",
                component:{
                    template:"<h2>404 - 404 - NotFound </h2>"
                }
            },
            {
                path:"*",
                redirect:'/404'
            }
        ]
        // 3. 创建 router 实例，然后传 `routes` 配置
        const router = new VueRouter({
            routes:routes 
        })

        // 4. 创建和挂载根实例。
        const vm = new Vue({
            el:"#app",
            router, // this.$router 获取全局的路由对象 
            data:{
                title:"路由初步学习 - 路由传参  "
            },
            watch:{
                '$route':function(to,from){
                    console.log(to)  // 进入的路由 
                    console.log(from) // 离开的路由 
                }
            }
        })
    </script>

    <!-- 
        Vue 路由是用来实现单页面应用的 
        routes 会根据不同的path 去映射不同的 组件  , 然后渲染组件到 router-view 

        动态路由  ==  路由参数传递   (动态路径参数)

        动态路由匹配  2中  ?id=1903  :(冒号)  
        a. ?id=1903  问号拼接的参数  表示查询参数  (search ?id=1903  ) (query id=1903)
        b. : 冒号声明    params    路由参数  动态路由  
        /users/:uid    /users/1001  /users/1002   $route.params.uid 
        /users/:uname?   /users/ming  /users/55k   $route.params.uname  
        ? 表示这个是一个未知的参数  三目    传     

        

        $route  路由对象属性    
        $route.query      个 key/value 对象，表示 URL 查询参数 (?)
        $route.params     一个 key/value 对象  获取路由参数   (:)   
        $route.name       当前路由的名称 
        $route.path       对应当前路由的路径，总是解析为绝对路径  
        $route.hash       当前路由的 hash 值 (带 #) ，如果没有 hash 值，则为空字符串
        $route.fullPath   完成解析后的 URL，包含查询参数和 hash 的完整路径
        $route.meta       路由标记信息  

        name 命名路由
        通过一个名称来标识一个路由  
        :to="{name:'users',params:{uid:1002}}"
        to="path"
        to={name:"name"}

        匹配优先级  
        同一个路径可以匹配多个路由     匹配的优先级就按照路由的定义顺序：
        谁先定义的，谁的优先级就最高    

        路由重定向   url 一定改变     
        www.baidu.com  ==>   www.zuozhaoxi.xom 
        { path:"*", redirect:{name:"404"}}

        路由别名  第二个名称   缺点 没有高亮  
        path =  '/admin'   
        alias = '/administrator'  

        router-link 的 高亮 path  

     -->
</body>
</html>